import React, { Component } from 'react'
import '../assert/css/cart.css'
import Header from '../components/DefaultHeader'
import { getnum, cartdelete } from '../request/cart_request'
export default class cart extends Component {
    state = {

        status: true

    }

    togglechecked() {
        const t_checked = !this.state.status
        this.props.getcartlist.forEach(element => {
            element.checked = t_checked
        });
        this.setState({ status: t_checked })

    }
    updateChecked(id) {
        //每个复选框状态
        const index = this.props.getcartlist.findIndex(item => {
            return item.id === id
        })
        const { checked } = this.props.getcartlist[index]
        this.props.getcartlist[index].checked = !checked
        const status = this.props.getcartlist.every(item => item.checked)
        this.setState({ status })


    }
    jiesuan() {
        //结算数量
        var num = 0
        const list = this.props.getcartlist.filter(item => {
            return item.checked === true
        })
        num = getnum(list)
        return num
    }
    price_all() {
        //总价
        var price = 0
        const list = this.props.getcartlist.filter(item => {
            return item.checked === true
        })
        list.map(item => {
            const n_price = item.price * item.num
            price += n_price
        })
        return price.toFixed(2)
    }
    del(id) {
        cartdelete(id).then(res => {
            if (res.code === 200) {
                this.props.getcartlist1()
            }
        })
    }
    render() {
        const { status } = this.state
        const { getcartlist } = this.props
        return (

            <div className="cart-container">
                <Header title='购物车' ></Header>
                <ul className="cart-list">
                    {

                        getcartlist.map(item => (

                            <li key={item.id}>
                                <input type="checkbox" checked={item.checked} onChange={() => this.updateChecked(item.id)} />
                                <img src={this.pic_path + item.img} alt="" />
                                <div className="info">
                                    <h5>{item.goodsname}</h5>
                                    <h5 className="price">
                                        &yen;{item.price}
                                        <span className="market-price" >&yen;111</span>
                                    </h5>
                                </div>
                                <div className="options">
                                    <div className="stepper">
                                        <button>-</button>
                                        <span>{item.num}</span>
                                        <button>+</button>
                                    </div>
                                    <button className="btn-danger" onClick={() => this.del(item.id)}>删除</button>
                                </div>
                            </li>
                        ))

                    }

                </ul>
                <div className="submit-bar">
                    <label><input type="checkbox" checked={status} onChange={() => {
                        this.togglechecked()
                    }} /> 全选</label>
                    <div className="price">订单总金额: &yen; {this.price_all()}</div>
                    <button className="btn-order">去结算( {this.jiesuan()}件)</button>
                </div>
            </div>
        )
    }
}
